<!DOCTYPE html>
<!-- Template by Quackit.com -->
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>PYTHON WORLD</title>
	{% load staticfiles %}

    <!-- Bootstrap Core CSS -->
    <link href="{% static "css/bootstrap.css" %}" rel="stylesheet">
    <link href="{% static "css/Pygments.css" %}" rel="stylesheet">

    <!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
    <link href="{% static "css/custom.css" %}" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <!-- Logo and responsive toggle -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href=" "><span class="glyphicon glyphicon-globe"></span> Logo</a>
            </div>
            <!-- Navbar links -->
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href=" ">Home</a>
                    </li>
                    <li>
                        <a href=" ">Django</a>
                    </li>
                    <li>
                        <a href=" ">Tornado</a>
                    </li>
                    <li>
                        <a href=" ">Crawler</a>
                    </li>
                    <li>
                        <a href=" ">Basics</a>
                    </li>
					<li class="dropdown">
						<a href=" " class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Others <span class="caret"></span></a>
						<ul class="dropdown-menu" aria-labelledby="about-us">
							<li><a href=" ">Programming World</a></li>
							<li><a href=" ">Poetry and the Distance</a></li>
							<li><a href=" ">The Pots and Pans</a></li>
						</ul>
					</li>    
                </ul>

				<!-- Search -->
				<form class="navbar-form navbar-right" role="search">
					<div class="form-group">
						<input type="text" class="form-control">
					</div>
					<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
				</form>

            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

<div class="container-fluid">

		<!-- Left Column
		<div class="col-sm-3">

			
				
		</div>   /Left Column-->
    
		<!-- Center Column -->
		<div class="col-sm-9">		
			<!-- Article -->
			<div class="row">
				<article class="col-xs-12">
					<h2>{{ article.title }}</h2>
					<p class="pull-right"><span class="label label-default">{{ article.column }}</span> <span class="label label-default">{{ article.pub_date | date:"j M" }}</span> <span class="label label-default">{{ article.author }}</span></p>
					<p><hr></p>
					<p>{{ content | safe }}</p>					
					<p></p>
					<ul class="list-inline">

						<li><a href=" "><span class="glyphicon glyphicon-comment"></span> {{ article.comment_num }} Comments</a></li>
						<li><a href="/focus/{{ article.id }}/keep/"><span class="glyphicon glyphicon-star-empty"></span>{{ article.keep_num }} Favorites</a></li>
						<li><a href="/focus/{{ article.id }}/poll/"><span class="glyphicon glyphicon-thumbs-up"></span>{{ article.poll_num }} Upvotes</a></li>
					</ul>
				</article>
			</div>			
			<hr>
			
			<!-- Comments -->
			<h3>Comments:</h3>
			<hr>
			{% for comment in comments %}
			<div class="row">
				
				<article class="col-xs-12">

					<p class="pull-right"> <span class="label label-default">tag</span> <span class="label label-default">{{ comment.user }}</span></p>

					<p>{{ comment.content }}</p>
				<!-- 	<p><button class="btn btn-default">Read More</button></p>  -->
					
					<ul class="list-inline">
						<li><a href=" ">{{ comment.pub_date | date:"j M" }}</a></li>
						<li><a href=" "><span class="glyphicon glyphicon-comment"></span> {{ comment.comment_num }} Comments</a></li>
						<li><a href=" "><span class="glyphicon glyphicon-thumbs-up"></span>{{ comment.poll_num }} Upvotes</a></li>
					</ul>
				</article>
			</div>			
			<hr>
			{% endfor %}
			<!-- CommentForm   -->
			<div class="row">
				<article class="col-xs-12">
					<h4>Sharing you comment:</h4>
					<form action="/focus/{{ article.id }}/comment/" method="post">
						{% csrf_token %}
						{{ commentform.as_p }}
						<input class="btn btn-default" type="submit" value="Submit" />
					</form>
				</article>
			</div>			
			<hr>
		</div><!--/Center Column-->


	  <!-- Right Column -->
	  <div class="col-sm-3">
			{% if request.user.is_authenticated %}
			<!-- Form --> 
			<div class="panel panel-default">				
				<div class="panel-heading">
					<h3 class="panel-title">
						<span class="glyphicon glyphicon-user"></span> 
						Logged In
					</h3>
				</div>
				<div class="panel-body">					
					<div class="form-group">hi:{{ user }} <a href="/focus/logout/"><input class="btn btn-default" type="submit" value="Logout" /></a></div>
				</div>
			</div>
			{% else %}
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">
						<span class="glyphicon glyphicon-log-in"></span> 
						Log In
					</h3>
				</div>
				<div class="panel-body">	
					<form action="/focus/login/" method="post">
						{% csrf_token %}
						{{ loginform.non_field_errors }}
						<div class="form-group">
							{{ loginform.uid }}

						</div>
						<div class="form-group">
							{{ loginform.pwd }}

						</div>
						<button type="submit" class="btn btn-default">Log In</button>
					</form>				
				</div>
			</div>
 			{% endif %}
 

			<!-- Progress Bars -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">
						<span class="glyphicon glyphicon-tasks"></span> 
						Completeness
					</h3>
				</div>
				<div class="panel-body">
					<div class="progress">
						<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100"
						aria-valuemin="0" aria-valuemax="100" style="width:100%">
							100% Django
						</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80"
						aria-valuemin="0" aria-valuemax="100" style="width:80%">
							80% Tornado
						</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="45"
						aria-valuemin="0" aria-valuemax="100" style="width:45%">
							45% Crawler
						</div>
					</div>
					<div class="progress">
						<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="35"
						aria-valuemin="0" aria-valuemax="100" style="width:35%">
							35% Basics
						</div>
					</div>
				</div>
			</div>

			<!-- List-Group Panel -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h1 class="panel-title"><span class="glyphicon glyphicon-fire"></span> The Principles of Programmer </h1>
				</div>
				<div class="list-group">
					<a href=" " class="list-group-item">Embrace Change </a>
					<a href=" " class="list-group-item">KISS: Keep it simple, stupid!</a>
					<a href=" " class="list-group-item">Hide Implementation Details</a>
					<a href=" " class="list-group-item">LoD: Law of Demeter</a>
					<a href=" " class="list-group-item">DRY: Don't Repeat Youself</a>
				</div>
			</div>

			<!-- Text Panel -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h1 class="panel-title"><span class="glyphicon glyphicon-pencil"></span> Don’t repeat yourself</h1>
				</div>

				<div class="panel-body">
					<p>DRY is probably the single most fundamental tenet in programming is to avoid repetition. Many programming constructs exist solely for that purpose (e.g. loops, functions, classes, and more). As soon as you start repeating yourself (e.g. a long expression, a series of statements, same concept) create a new abstraction.</p>
					<p><button class="btn btn-default">Engage</button></p>
				</div>
			</div>

			<!-- Text Panel -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">
						<span class="glyphicon glyphicon-bullhorn"></span> 
						Active Predomination
					</h3>
				</div>
				<div class="panel-body">
					<p>Proactively envisioned multimedia based expertise and cross-media growth strategies.</p>
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-default">Resource</button>
						<button type="button" class="btn btn-default">Envision</button>
						<button type="button" class="btn btn-default">Niche</button>
					</div>
				</div>
			</div>	

			<!-- advertisements --> 
 			<h3><span class="glyphicon glyphicon-link"></span> Advertisements</h3>
			<div id="side-carousel" class="carousel slide" data-ride="carousel">
				<ol class="carousel-indicators">
					<li data-target="#side-carousel" data-slide-to="0" class="active"></li>
					<li data-target="#side-carousel" data-slide-to="1"></li>
					<li data-target="#side-carousel" data-slide-to="2"></li>
				</ol>
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<a href=" ">
							<img class="img-responsive" src="holder.js/400x300?bg=FF8C00&text=Image%201" alt="">
						</a>
						<div class="carousel-caption">
							<h3>I am a genius</h3>
							<p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
						</div>
					</div>
					<div class="item">
						<a href=" ">
							<img class="img-responsive" src="holder.js/400x300?bg=FF8C00&text=Image%202" alt="">
						</a>
						<div class="carousel-caption">
							<h3>You are an idiot</h3>
							<p>Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
						</div>
					</div>
					<div class="item">
						<a href=" ">
							<img class="img-responsive" src="holder.js/400x300?bg=FF8C00&text=Image%203" alt="">
						</a>
						<div class="carousel-caption">
							<h3>Enough! </h3>
							<p>Everyone shut up and listen to me.</p>
						</div>
					</div>			  
				</div>
				<a class="left carousel-control" href="#side-carousel" role="button" data-slide="prev">
				  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				  <span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#side-carousel" role="button" data-slide="next">
				  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				  <span class="sr-only">Next</span>
				</a>
			  </div>

	  </div><!--/Right Column -->

	</div><!--/container-fluid-->
	
	<footer>
		<div class="footer-blurb">
			<div class="container">
				<div class="row">
					<div class="col-sm-3 footer-blurb-item">
						<h3><span class="glyphicon glyphicon-text-size"></span> Cute</h3>
						<p>We don't read and write poetry because it's cute. We read and write poetry because we are members of the human race. And the human race is filled with passion. And medicine, law, business, engineering, these are noble pursuits and necessary to sustain life. But poetry, beauty, romance, love, these are what we stay alive for.</p>
						<p><a class="btn btn-default" href=" ">Procrastinate</a></p>
					</div>
					<div class="col-sm-3 footer-blurb-item">
						<h3><span class="glyphicon glyphicon-wrench"></span> Efficient</h3>
						<p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. </p>
						<p><a class="btn btn-default" href=" ">Unleash</a></p>
					</div>
					<div class="col-sm-3 footer-blurb-item">
						<h3><span class="glyphicon glyphicon-paperclip"></span> Complete</h3>
						<p>Professionally cultivate one-to-one customer service with robust ideas. Completely synergize resource taxing relationships via premier niche markets. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
						<p><a class="btn btn-default" href=" ">Complete</a></p>
					</div>
					<div class="col-sm-3 footer-blurb-item">
						
						<!-- Thumbnails --> 
						<h3><span class="glyphicon glyphicon-camera"></span> Phosfluorescent</h3>
							<div class="row">
								<div class="col-xs-6">
									<a href=" " class="thumbnail">
										<img src="holder.js/110x80" alt="">
									</a>
								</div>
								<div class="col-xs-6">
									<a href=" " class="thumbnail">
										<img src="holder.js/110x80" alt="">
									</a>
								</div>
								<div class="col-xs-6">
									<a href=" " class="thumbnail">
										<img src="holder.js/110x80" alt="">
									</a>
								</div>
								<div class="col-xs-6">
									<a href=" " class="thumbnail">
										<img src="holder.js/110x80" alt="">
									</a>
								</div>
							</div>
							
					</div>

				</div>
				<!-- /.row -->	
			</div>
        </div>
        
        <div class="small-print">
        	<div class="container">
        		<p><a href=" ">Terms &amp; Conditions</a> | <a href=" ">Privacy Policy</a> | <a href=" ">Contact</a></p>
        		<p>Copyright &copy; Example.com 2015 </p>
        	</div>
        </div>
	</footer>

	
    <!-- jQuery -->
    <script src="{% static "js/jquery-1.11.3.min.js" %}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="{% static "js/bootstrap.min.js" %}"></script>
	
	<!-- IE10 viewport bug workaround -->
	<script src="{% static "js/ie10-viewport-bug-workaround.js" %}"></script>
	
	<!-- Placeholder Images -->
	<script src="{% static "js/holder.min.js" %}"></script>
	
</body>

</html>
